<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>B 站 Top100 海报墙</title>
  <style>
    body {font-family: -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; background: #f4f4f4;}
    h1 {text-align: center; margin: 20px 0;}
    .grid {display: grid; grid-template-columns: repeat(auto-fill, 130px); gap: 10px; justify-content: center; padding: 20px;}
    .card {width: 130px; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.2);}
    .card img {width: 100%; height: 80px; object-fit: cover;}
    .card .info {padding: 6px; font-size: 12px; line-height: 1.3;}
    .card .title {font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .card .play {color: #666;}
  </style>
</head>
<body>
  <h1>B 站排行榜 Top100 海报墙</h1>
  <div class="grid" id="grid"></div>

<script>
fetch('bilibili_top100.xlsx')   // 占位，后面换成 JSON 即可
  .catch(() => fetch('data.json'))
  .then(r => r.json())
  .then(data => {
    data.forEach(v => {
      const card = document.createElement('div');
      card.className = 'card';
      card.innerHTML = `
        <img src="covers/${v.排名.toString().padStart(3,'0')}_${v.UP主}.jpg" alt="">
        <div class="info">
          <div class="title">${v.标题}</div>
          <div class="play">${(v.播放量/10000).toFixed(1)}万播放</div>
        </div>`;
      document.getElementById('grid').appendChild(card);
    });
  });
</script>
</body>
</html>